<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

   <!-- 所属分类：级联下拉列表 -->
   <!-- 一级分类 -->
      <!-- 标题 -->
      <el-form-item>
        <el-input v-model="articleDataQuery.title" placeholder="新闻标题"/>
      </el-form-item>
      <!-- 讲师 -->

      <el-form-item>
        <el-select
          v-model="articleDataQuery.type"
          placeholder="请选择新闻类型">
          <el-option
            v-for="type in typeList"
            :key="type.value"
            :label="type.label"
            :value="type.value"/>
        </el-select>
      </el-form-item>

    <el-form-item label="添加时间">
      <el-date-picker
        v-model="articleDataQuery.begin"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="00:00:00"
      />
    </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="articleDataQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="selectData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>

      </el-form>

       <!-- 表格 -->
       <el-table
         :data="list"
         border
         fit
         highlight-current-row
         row-class-name="myClassList">

         <el-table-column
           label="序号"
           width="70"
           align="center">
           <template slot-scope="scope">
             {{ (page - 1) * limit + scope.$index + 1 }}
           </template>
         </el-table-column>

         <el-table-column label="新闻标题" align="center">
           <template slot-scope="scope">
             {{ scope.row.title}}
           </template>
           </el-table-column>

         <el-table-column label="新闻内容" width="470" align="center">
           <template slot-scope="scope">
             {{ scope.row.content}}
           </template>
           </el-table-column>

           <el-table-column label="创建时间" align="center">
             <template slot-scope="scope">
               {{ scope.row.gmtCreate.substr(0, 10) }}
             </template>
           </el-table-column>
           <el-table-column label="信息爬取时间" align="center">
             <template slot-scope="scope">
               {{ scope.row.gmtModified.substr(0, 10) }}
             </template>
           </el-table-column>

           <el-table-column label="新闻类型" width="100" align="center" >
             <template slot-scope="scope">
               {{ scope.row.type ===1 ? '科大新闻' : scope.row.type===2? '疫情最新通报' : '今日资讯' }}
             </template>
           </el-table-column>

           <el-table-column label="操作" width="150" align="center">
             <template slot-scope="scope">
               <el-button type="danger"  icon="el-icon-delete" @click="deleteCourse(scope.row.id)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>

           <!-- 分页 -->
            <el-pagination
              :current-page="page"
              :page-size="limit"
              :total="total"
              style="padding: 30px 0; text-align: center;"
              layout="total, prev, pager, next, jumper"
              @current-change="getList"
            />
  </div>
</template>

<script>
  //引入course.js文件
  import article from'@/api/course/course'
  export default {

  data() {
    return {
      page:1,//当前页
      limit:10,//每页的记录数
      total:0,//总记录数
      articleDataQuery:{
        title:'',
        type:0,
        begin:'',
        end:''
      },//条件查询封装的对象
      list:[],//查询之后接口返回的集合
      typeList:[{
        value:1,
        label:'科大新闻'
      },
      {
       value:2,
       label:'疫情最新通报'
      },
      {
        value:4,
        label:'今日资讯'
      }]
    }
  },


    created(){//页面渲染之前执行，一般都是调用methods里面的方法
      this.getList()
    },

    methods:{//创建具体的方法，调用course.js里面定义的方法
    getList(page = 1){//默认page为1，上面实践绑定中：@current-change="getList"会自动把当前页当作参数传进来
      this.page=page
      article.getArticleList(this.page,this.limit,this.articleDataQuery)
      .then(response=>{//请求成功
        //console.log(response)
        //为变量赋值
        this.total=response.data.total
        this.list=response.data.rows
      })
      .catch(error=>{//请求失败
        console.log(error)
      })
    },

    //条件查询
    selectData(){
      this.getList()
    },
    //删除课程
   deleteCourse(articleId) {
     this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
        article.deleteArticle(articleId)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          location.reload()//刷新页面
        }).catch(response=>{
          this.$message({
            type: 'error',
            message: response.message
          })
        })
        })
   },
    resetData(){//清空功能
      //1.清空查询的数据
     this.articleDataQuery.begin='',
     this.articleDataQuery.end='',
     this.articleDataQuery.title='',
     this.articleDataQuery.type=0
     //2.查询所有讲师数据
     this.getList()
    }
   }
  }
</script>

<style>
</style>
